<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-simple.xhtml">
    <ui:define name="cabecera">
        <title>Nombre del ánimal</title>
        <script src="http://maps.google.com/maps/api/js?sensor=true"
        type="text/javascript"></script>
    </ui:define>
    <ui:define name="contenido">
        <p:tabView id="pestanya" orientation="left">
            <p:tab title="Clasificación científica">
                <p:panel header="Clasificación científica" style="font-size: 110%; text-align: center">
                    <center>
                        <p:panelGrid style="font-size: 100%">
                            <f:facet name="header">
                                <p:row>  
                                    <p:column colspan="2">
                                        Clasificación científica
                                    </p:column> 
                                </p:row>
                            </f:facet>
                            <p:row> 
                                <p:column>Phylum</p:column> 
                                <p:column>Nombre del filo</p:column>  
                            </p:row> 
                            <p:row>  
                                <p:column>Clase</p:column> 
                                <p:column>Nombre de la clase</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Subclase</p:column> 
                                <p:column>Nombre de la subclase</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Infraclase</p:column> 
                                <p:column>Nombre de la infraclase</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Orden</p:column> 
                                <p:column>Nombre del orden</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Suborden</p:column> 
                                <p:column>Nombre de la suborden</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Familia</p:column> 
                                <p:column>Nombre de la familia</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Superfamilia</p:column> 
                                <p:column>Nombre de la superfamilia</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Subfamilia</p:column> 
                                <p:column>Nombre de la subfamilia</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Tribu</p:column> 
                                <p:column>Nombre de la tribu</p:column>
                            </p:row>
                            <p:row>  
                                <p:column>Variedad</p:column> 
                                <p:column>Nombre de la variedad</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Género</p:column> 
                                <p:column>Nombre del género</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Especie</p:column> 
                                <p:column>Nombre de la especie</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>Subespecie</p:column> 
                                <p:column>Nombre de la subespecie</p:column>  
                            </p:row>
                            <p:row>  
                                <p:column colspan="2" styleClass="ui-widget-header" style="text-align: center">  
                                    <h:outputText value="Nombre científico"/> 
                                </p:column>  
                            </p:row> 
                            <p:row>  
                                <p:column colspan="2">Nombre científico del animal</p:column>   
                            </p:row>
                            <p:row>  
                                <p:column colspan="2" styleClass="ui-widget-header" style="text-align: center">  
                                    <h:outputText value="Nombre común" /> 
                                </p:column>  
                            </p:row> 
                            <p:row>  
                                <p:column colspan="2">Nombre común del animal</p:column>   
                            </p:row>
                            <p:row>  
                                <p:column colspan="2" styleClass="ui-widget-header" style="text-align: center">  
                                    <h:outputText value="Sinonimia" /> 
                                </p:column>  
                            </p:row> 
                            <p:row>  
                                <p:column colspan="2">Otros nombres del animal</p:column>   
                            </p:row>
                        </p:panelGrid>
                    </center>
                </p:panel>
            </p:tab>
            <p:tab title="Descripción">
                <p:panel header="Descripción" style="font-size: 110%; text-align: center">
                    <p id="texto">
                        Aquí estará una descripción general del animal, la cual será 
                        llamada desde la base de datos.
                    </p>
                </p:panel>
            </p:tab>
            <p:tab title="Fotografía">
                <p:panel header="Fotografía" style="font-size: 110%; text-align: center">
                    <center>
                        <h:graphicImage name="foto.jpg" library="imagenes" width="640" height="480" />
                    </center>
                </p:panel>
            </p:tab>
            <p:tab title="Ubicación">
                <p:panel header="Ubicación" style="font-size: 110%; text-align: center">
                    <center>
                        <p:gmap center="13.677012, -89.196539" zoom="11" type="HYBRID" 
                                            style="width:600px;height:400px" /> 
                    </center>
                </p:panel>
            </p:tab>
        </p:tabView>
    </ui:define>  
</ui:composition>

